<div ng-controller="InteractiveWidgetEditor">
  <div class="row-fluid">
    <div class="span2">
      <span class="oppia-editor-header">
        interaction
      </span>
    </div>

    <div class="span10">
      <div class="container-fluid">
        <div class="row-fluid">

          <div class="span9 oppia-iframe-container">
            <div>
              <div class="oppia-widget-preview">
                <!-- This iframe is dynamically resized based on its content. -->
                <iframe id="interactiveWidgetPreview" frameborder="0" width="100%" height="5px" seamless="seamless">
                </iframe>
              </div>

              <div>
                <label class="checkbox">
                  <input type="checkbox" ng-model="widgetSticky">
                  Reuse the previous state's interaction, if possible.
                  <a href="https://code.google.com/p/oppia/wiki/InteractiveWidgets#Other_options" target="_blank">
                  More info...
                  </a>
                </label>
              </div>
            </div>
          </div>

          <div class="span3">
            <button ng-click="showChooseInteractiveWidgetModal()" class="pull-right">
              Change type
            </button>
            <br><br>
            <button ng-click="showCustomizeInteractiveWidgetModal()" class="pull-right" ng-if="!isEmpty(widgetCustomizationArgs)">
              Customize
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>

  <div class="row-fluid" id="rules">
    <div ng-repeat="(handlerName, handler) in widgetHandlers">
      <div class="span2">
        <span class="oppia-editor-header">
          when readers <[handlerName]>:
        </span>
        <br>
        <a href="https://code.google.com/p/oppia/wiki/Rules" target="_blank">
          More info...
        </a>
      </div>

      <div class="span10">
        <div class="container-fluid">
          <div class="row-fluid">

            <div ng-repeat="rule in handler" ng-hide="$last">
              <div class="span9" style="padding: 5px;">
                 <table style="vertical-align: top; width: 100%">
                    <tr>
                      <td colspan=2 class="oppia-rule-bubble">
                        <center style="font-weight: bold;">
                          <span ng-if="isRuleConfusing(rule)">
                            <i class="icon-warning-sign" title="This rule loops back to the same state and has no feedback, so it will probably confuse readers."></i>
                          </span>
                          <span ng-class="{'oppia-red': isRuleConfusing(rule)}">
                            Answer <[rule | parameterizeRuleDescription: widgetCustomizationArgs.choices]>
                          </span>
                        </center>
                      </td>
                    </tr>
                    <tr>
                      <td class="oppia-feedback-bubble">
                        <span ng-if="rule.feedback.length === 0">
                          <em>This rule provides no feedback.</em>
                        </span>
                        <span ng-repeat="fb in rule.feedback">
                           • <span ng-bind-html="fb|truncate"></span><br>
                        </span>
                      </td>
                      <td class="oppia-dest-bubble">
                        <center>
                          <span ng-show="rule.dest == 'END' || rule.dest == stateId">
                             <[getStateNameForRule(rule.dest)]>
                          </span>
                          <span ng-hide="rule.dest == 'END' || rule.dest == stateId">
                            <a href="/create/<[explorationId]>#/gui/<[rule.dest]>">
                               <[getStateNameForRule(rule.dest)]>
                            </a>
                          </span>
                        </center>
                      </td>
                    </tr>
                  </table>
              </div>

              <div class="span3">
                <span class="pull-right">
                  <button ng-click="openEditRuleModal(handlerName, $index)" class="oppia-rule-ctrl">Edit</button>
                  <button ng-show="$index != 0" ng-click="swapRules(handlerName, $index, $index - 1)" class="oppia-rule-ctrl">⇑</button>
                  <span ng-hide="$index != 0" class="oppia-grayed">⇑</span>

                  <button ng-show="$index < handler.length - 2" ng-click="swapRules(handlerName, $index, $index + 1)" class="oppia-rule-ctrl">⇓</button>
                  <span ng-hide="$index < handler.length - 2" class="oppia-grayed">⇓</span>

                  <button ng-click="deleteRule(handlerName, $index)" class="oppia-rule-ctrl"> &times; </button>
                </span>
              </div>
            </div>
          </div>

          <div class="row-fluid" ng-show="widgetId != 'Continue'">
            <div class="span9">
              <table style="width: 100%">
                <tr>
                  <td style="vertical-align: top; padding: 10px;" class="oppia-lightly-grayed">
                    <center>(<em>New rules will be added here.</em>)</center>
                  </td>
                </tr>
              </table>
            </div>

            <div class="span3">
              <span class="pull-right" style="padding-top: 5px;">
                <button ng-click="openAddRuleModal(handlerName)" class="oppia-rule-ctrl"> Add new rule </button>
              </span>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span9">
              <table style="width: 100%;">
                  <tr>
                    <td colspan=2 ng-class="getCssClassForRule(handler[handler.length - 1])">
                      <center style="font-weight: bold;">
                        <span ng-if="isRuleConfusing(handler[handler.length - 1])">
                          <i class="icon-warning-sign" title="This rule loops back to the same state and has no feedback, so it will probably confuse readers."></i>
                        </span>
                        <span>
                          <[getDefaultRule(handlerName) | parameterizeRuleDescription: widgetCustomizationArgs.choices]>
                        </span>
                      </center>
                    </td>
                  </tr>
                  <tr>
                    <td class="oppia-feedback-bubble">
                      <span ng-if="getDefaultRule(handlerName).feedback.length === 0">
                        <em>This rule provides no feedback.</em>
                      </span>
                      <span ng-repeat="fb in getDefaultRule(handlerName).feedback">
                        • <span ng-bind-html="fb|truncate"></span><br>
                      </span>
                    </td>
                    <td class="oppia-dest-bubble">
                      <center>
                        <span ng-show="getDefaultRule(handlerName).dest == 'END' || getDefaultRule(handlerName).dest == stateId">
                           <[getStateNameForRule(getDefaultRule(handlerName).dest)]>
                        </span>
                        <span ng-hide="getDefaultRule(handlerName).dest == 'END' || getDefaultRule(handlerName).dest == stateId">
                          <a href="/create/<[explorationId]>#/gui/<[getDefaultRule(handlerName).dest]>">
                            <[getStateNameForRule(getDefaultRule(handlerName).dest)]>,
                          </a>
                        </span>
                      </center>
                    </td>
                  </tr>
               </table>
            </div>

            <div class="span3">
              <span class="pull-right">
                <button ng-click="openEditRuleModal(handlerName, handler.length - 1)" class="oppia-rule-ctrl">Edit</button>
                <span class="oppia-grayed oppia-rule-ctrl"> ⇑ </span>
                <span class="oppia-grayed oppia-rule-ctrl"> ⇓ </span>
                <span class="oppia-grayed oppia-rule-ctrl"> &times; </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="modals/chooseInteractiveWidget">
    <div class="modal-header">
      <h3>Choose an Interactive Widget</h3>
    </div>

    <div class="modal-body">
      <iframe src="/widgetrepository?iframed=true&interactive=true"
              width="100%" height="400px" frameborder="0"
              id="interactiveWidgetRepository">
      </iframe>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn" ng-click="cancel()">
        Cancel
      </button>
    </div>
  </script>


  <script type="text/ng-template" id="modals/ruleEditor">
    <div class="modal-header">
      <h3><[modalTitle]></h3>
    </div>

    <div class="modal-body">
      <div ng-if="!tmpRule.description">
        <div ng-repeat="(description, name) in existingRules" class="oppia-rule">
          <span ng-bind-html="description | bracesToText"></span>
          <button type="button" class="pull-right"
                  ng-click="selectRule(description, name)">
            Select
          </button>
        </div>
      </div>

      <div ng-if="tmpRule.description">
        <span ng-if="tmpRule.description != 'Default'">
          Answer
        </span>
        <span ng-repeat="item in tmpRuleDescriptionFragments track by $index">
          <span ng-if="item.type == 'select'">
            <select ng-model="tmpRule.inputs[item.varName]" ng-options="choice.id as choice.val for choice in getExtendedChoiceArray(widgetCustomizationArgs.choices.value)">
            </select>
          </span>
          <span ng-if="item.type != 'select' && item.type != 'noneditable'">
            <object-editor obj-type="<[item.type]>" always-editable="true" value="tmpRule.inputs[item.varName]"></object-editor>
          </span>
          <span ng-if="item.type == 'noneditable'">
            <[item.text]>
          </span>
        </span>

        <hr>
        <div>
          Destination:
          <select ng-model="tmpRule.dest" ng-required="tmpRule.dest != '?'"
                  ng-options="getDestName(id) for id in allDests">
          </select>

          <input type="text" ng-model="tmpRule.destNew"
                 ng-required="tmpRule.dest == '?'" ng-show="tmpRule.dest == '?'">
        </div>
        <div>
          <p>Feedback for the reader (chosen at random from the following):</p>
          <object-editor obj-type="List" init-args="FEEDBACK_LIST_INIT_ARGS" value="tmpRule.feedback">
          </object-editor>
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <span ng-show="tmpRule.description">
        <button type="button" class="btn" ng-click="save()">
          Use this rule
        </button>
      </span>

      <!-- The next button is shown only when a new rule is being added. -->
      <span ng-show="tmpRule.description && tmpRule.index == null">
        <button type="button" class="btn" ng-click="resetTmpRule()">
          Return to rule menu
        </button>
      </span>

      <span ng-show="!tmpRule.description && tmpRule.index == null">
        <button type="button" class="btn" ng-click="cancel()">
          Cancel
        </button>
      </span>
    </div>
  </script>

</div>
